<template>
  <div class="data-index">
    <el-card class="card-full" :header="route.meta.title">
      <date-range
        show-tools
        v-model="dateTime"
        @change="getTableData"
      ></date-range>
      <div class="my-6">
        <span class="pr-6">新增视频数：{{ dataTotal.videoNum }}</span>
        <span>播放总数：{{ dataTotal.videoPlayNum }}</span>
      </div>
      <el-table
        :data="dataList"
        :border="dataList.length"
        :show-header="dataList.length"
        :max-height="tableHeight + 'px'"
      >
        <template #empty>
          <empty />
        </template>
        <el-table-column
          prop="curDate"
          label="日期"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="videoNum"
          label="新增视频数"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="videoPlayNum"
          label="视频播放总数"
          min-width="150"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, computed } from "vue"
import { timeFormat } from "@/utils/formatTime.js"
import { message } from "@/Hooks/Element-plus/index.js"
import DateRange from "@/components/daterange.vue"
import pagination from "@/views/Components/pagination/index.vue"
import { getVideoDataApi } from "@/api/data"
import { useRoute } from "vue-router"
import { pick } from "lodash"
import empty from "@/components/empty.vue"

const route = useRoute()
defineOptions({
  name: "data_index",
})

const dateTime = ref([])
const dataList = ref([])
const dataTotal = ref({
  videoNum: 0,
  videoPlayNum: 0,
})
const getTableData = async () => {
  const [startDate, endDate] = dateTime.value
  const res = await getVideoDataApi({ startDate, endDate })
  if (res.success) {
    const data = res.data as any
    dataList.value = data.dateList || []
    dataTotal.value = pick(data, ["videoNum", "videoPlayNum"])
  }
}

const tableHeight = ref(0)
const getTableHeight = () => {
  const layoutMenu = document.querySelector(".layout-menu")
  if (layoutMenu) {
    tableHeight.value = Math.max(layoutMenu.clientHeight - 330, 300)
  } else {
    tableHeight.value = 300 // 设置一个默认值
  }
}

window.addEventListener("resize", () => {
  getTableHeight()
})

onMounted(() => {
  getTableData()
  getTableHeight()
})
</script>

<style lang="scss" scoped>
.data-index {
}
</style>
